
{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
    {%- liquid
      case block.settings.color_schema
        when 'primary'
          assign background_color = 'bg-primary'
        when 'secondary'
          assign background_color = 'bg-secondary'
        when 'inverse'
          assign background_color = 'bg-inverse'
          when 'white'
          assign background_color = 'bg-white'
        when 'black'
          assign background_color = 'bg-black'
      endcase
    
      case block.settings.text_color
        when 'white'
          assign text_color = 'text-body-inverse'
          assign richtext_link_style = 'richtext-link-light'
        else
          assign text_color = ''
          assign richtext_link_style = 'richtext-link-default'
      endcase
    -%}
    {%- if block.settings.text != blank -%}
    <div class="{{ background_color }}">
      <div class="announcement-bar text-center container {{ text_color }}" role="region" aria-label="{{ 'sections.header.announcement' | t }}">
        
        <div class="py-2 mw-text-5 mx-auto small richtext-with-link ">
          {% if block.settings.icon != blank %}
          <img class="me-2 icon-width h-auto" loading="lazy" width="{{ block.settings.icon.width }}" height="{{ block.settings.icon.height }}" srcset="{{ block.settings.icon | img_url: '16x' }} 16w, {{ block.settings.icon | img_url: '24x' }} 24w, {{ block.settings.icon | img_url: '16x' }} 32w" sizes="(max-width: 1151.98px) 16px, 24px" src="{{ block.settings.icon | img_url: 'master' }}" alt="{{ block.settings.icon.alt | escape }}" />
          {% endif %}
          <div class="no-last-margin d-inline align-middle {{ richtext_link_style }}">
            {{ block.settings.text }}
          </div>
        </div>
      </div>
    </div>
    {%- endif -%}
  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "Announcement bar",
  "class": "announcement-bar",
  "max_blocks": 1,
  "blocks": [
    {
      "type": "announcement",
      "name": "Announcement",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Welcome to our store</p>"
        },
        {
          "label": "Icon",
          "type": "image_picker",
          "id": "icon"
        },
        {
          "type": "select",
          "id": "color_schema",
          "label": "Background color",
          "options": [
            {
              "value": "primary",
              "label": "Primary"
            },
            {
              "value": "secondary",
              "label": "Secondary"
            },
            {
              "value": "inverse",
              "label": "Inverse"
            },
            {
              "value": "white",
              "label": "White"
            },
            {
              "value": "black",
              "label": "Black"
            }
          ],
          "default": "primary"
        },
        {
          "type": "select",
          "id": "text_color",
          "label": "Text color",
          "options": [
            {
              "value": "white",
               "label": "White"
            },
            {
              "value": "black",
              "label": "Black"
            }  
          ],
          "default": "black"
        }
      ]
    }
  ]
}
{% endschema %}
